/**
 * 路由配置文件
 * 
 * 功能：
 * 1. 定义应用的所有路由
 * 2. 实现路由懒加载
 * 3. 配置路由重定向和404页面
 * 4. 设置嵌套路由结构
 * 
 * 技术特点：
 * - 使用React.lazy实现组件懒加载
 * - 使用React.Suspense处理加载状态
 * - 支持嵌套路由配置
 * - 包含路由重定向和404处理
 */

import React, { lazy } from 'react'
// Navigate重定向组件
import { Navigate } from 'react-router-dom'
import Loading from '@/components/loading'
import Main from "@/views/main"

/**
 * 路由懒加载配置
 * 使用React.lazy实现组件的按需加载，提升应用性能
 */
const Home = lazy(()=>import("@/views/home/index"))
const Login = lazy(()=>import("@/views/login/index"))
const Page1 = lazy(()=>import("@/views/page1"))
const NotFound = lazy(()=>import("@/views/error/404"))

/**
 * 加载组件包装器
 * 为懒加载组件提供加载状态提示
 * @param component 需要包装的组件
 * @returns 包装后的组件
 */
const withLoadingComponent = (component: JSX.Element) => (
    <React.Suspense fallback={<Loading />}>
        {component}
    </React.Suspense>
)

/**
 * 路由配置数组
 * 定义应用的所有路由规则
 */
const routes = [
    // 根路径重定向到首页
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    // 主布局路由，包含嵌套子路由
    {
        path: '/',
        element: <Main />,
        children:[
            // 首页路由
            {
                path: 'home',
                element: withLoadingComponent(<Home />)
            },
            // 页面1路由
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            // 404页面路由，匹配所有未定义的路由
            {
                path: '*',
                element: withLoadingComponent(<NotFound />)
            },
        ]
    },
    // 登录页面路由
    {
        path: '/login',
        element: withLoadingComponent(<Login />)
    },
    
]

export default routes
